<script setup lang="ts">
import {useRoute} from "vue-router";
import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
import _ from "lodash";
import {getUserByUid, getUserCenterByUid} from "@/api/user/user";
import {commonConsoleLog, ECode} from "@/util/commonUtil";
import {userCenterSysConfig} from "@/util/userCenterUtil";
import {recorderBehavior} from "@/api/system/system";
import {useSystemDictStore} from "@/store/system/systemDictStore";
import {message} from "ant-design-vue";
import UserCenterHeader from "@/components/userCenter/header/index.vue"
import AuthorWidget from "@/components/userCenter/authorWidget/index.vue"
import {userConfigStore} from "@/store/user/userConfigStore";

const route = useRoute()
const userLevelImagesDictList: any = computed(() => useSystemDictStore().UserLevelImages)
// 用户自定义背景图片
const userBackgroundImages = ref<any>(userCenterSysConfig.defaultBackgroundImages)
const userInfo = ref<any>({})
const adminUid = ref<any>('')
const userUid = ref<any>('')
const loginUserInfo = ref<any>({})

const userCenterInfo = ref<any>({
  blogCount: 0,
  questionCount: 0,
  followCount: 0,
  watchCount: 0,
  momentCount: 0,
  problemCount: 0
})
const userLevelImage = ref<any>('')

onBeforeMount(() => {
  adminUid.value = route.query.adminUid;
  userUid.value = route.query.userUid;
  initUserInfo(false)
})
onMounted(() => {
  loginUserInfo.value = computed(() => userConfigStore().userInfo)
})
watch(() => userConfigStore().userInfo, () => {
  loginUserInfo.value = computed(() => userConfigStore().userInfo)
})
watch(() => route, (to) => {
  adminUid.value = to.query.adminUid;
  userUid.value = to.query.userUid;
  initUserInfo(false)
})
watch(() => useSystemDictStore().UserLevelImages, () => {
  try {
    userLevelImage.value = getLvImage(userInfo.value.userLevel)
  }catch (e){
   console.log('此处裂开==>',e)
  }
})

async function initUserInfo(refresh: any) {
  let params = new URLSearchParams()
  if (!_.isUndefined(adminUid.value)) {
    params.append("adminUid", adminUid.value)
  }
  if (!_.isUndefined(userUid.value)) {
    params.append("userUid", userUid.value)
  }
  params.append("refresh", refresh)
  await getUserByUid(params).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      let userInfoData: any = response.data
      if (!_.isUndefined(userInfoData.backgroundFileUrl)) {
        userBackgroundImages.value = userInfoData.backgroundFileUrl
      } else {
        userBackgroundImages.value = userCenterSysConfig.defaultBackgroundImages
        setTimeout(() => {
          recorderBehavior({
            "otherData": userInfoData.nickName + "的个人中心",
            "bizUid": userInfoData.uid,
            "bizType": "USER",
            "behavior": "VISIT_PAGE"
          }).then((response: any) => {
            if (response.code == ECode.SUCCESS) {
              commonConsoleLog(userInfoData.nickName + "的个人中心信息上报成功")
            }
          })
        }, 5000)
      }
      if (!_.isEmpty(userLevelImagesDictList.value)) {
        userLevelImage.value = getLvImage(userInfoData.userLevel)
      }
      userInfo.value = userInfoData
      setTimeout(() => {
        recorderBehavior({
          "otherData": userInfoData.nickName + "的个人中心",
          "bizUid": userInfoData.uid,
          "bizType": "USER",
          "behavior": "VISIT_PAGE"
        }).then((response: any) => {
          if (response.code == ECode.SUCCESS) {
            commonConsoleLog(userInfoData.nickName + "的个人中心信息上报成功")
          }
        })
      }, 3000)
    } else {
      message.error(response.message)
    }
  })
  await getUserCenterByUid(params).then((response: any) => {
    if (response.code == ECode.SUCCESS){
      userCenterInfo.value = response.data
    }
  })
}

function getLvImage(level: any) {
  if (_.isEmpty(userLevelImagesDictList.value)) {
    return;
  }
  if (!_.isUndefined(userLevelImagesDictList.value[level - 1].dictValue)){
    return userLevelImagesDictList.value[level - 1].dictValue;
  }else {
   return null
  }
}

function clickIsWatchUser(e: any) {
  userInfo.value.isWatchUser = e
}
function clickIsUnWatchUser(e: any) {
  userInfo.value.isWatchUser = e
}

</script>

<template>
  <section class="userCenter flex w-full flex-col rounded-xl justify-center lg:mt-10 text-2xl m-auto overflow-hidden">
    <!-- 头部数据 -->
    <UserCenterHeader
        :userInfo="userInfo"
        :userLevelImage="userLevelImage"
        :loginUserInfo="loginUserInfo.value"
        :adminUid="adminUid"
        @isWatchUser="clickIsWatchUser"
        @unWatchUser="clickIsUnWatchUser"
        :userUid="userUid"/>
    <!-- 底部数据 -->
    <AuthorWidget
        :userCenterInfo="userCenterInfo"
        :adminUid="adminUid"
        :userUid="userUid"/>
  </section>
</template>

<style scoped lang="less">
:deep(.ant-tabs-tab-btn) > span, :deep(.ant-tabs .ant-tabs-tab .anticon) {
  margin-right: 4px;
}

@media (min-width: 1024px) {
  .userCenter {
    max-width: 1200px;
  }
}
</style>
